<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <Header />
        <Search/>
        <Login/>
      </el-header>
      <el-main>
      <el-aside width="200px">
              <nav class="nav-box">
                <RouterLink to="/home/tuijian">发现音乐</RouterLink>
                <RouterLink to="/about">About</RouterLink>
              </nav>

      </el-aside>
        <RouterView />
      </el-main>
      <el-footer>

        播放器
      </el-footer>
    </el-container>
  </div>
</template>



<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
//头部
import Header from './views/Header/Header.vue'
//登录组件
import Login from './components/Login/Login.vue'
//搜索
import Search from './components/Search/Search.vue'
</script>

<style lang="less" scoped>
  .common-layout{
    width: 100%;
    height: 100%;
    .el-container{
      width: 100%;
      height: 100%;
    }
    .el-header{
      background-color: #ec4141;
      height: 50px!important;
      padding: 0;
      margin: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
  }
    .el-aside{
      border-right: 1px solid #ccc;
      background: #fff;
      .nav-box{
        display: flex;
        flex-direction: column;
      }
    }
    .el-main{
      padding: 0;
      flex: 1;
      display: flex;
      
    }
    .el-footer{
      border-top: #ccc 1px solid ;
    }

  }
</style> 
